﻿<pn:PhoneApplicationPage
    x:Class="PillBox.Client.Views.ScheduleView"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:pi="clr-namespace:PillBox.Interactivity;assembly=PillBox.Interactivity"
    xmlns:pn="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone"
    xmlns:ps="clr-namespace:Microsoft.Phone.Shell;assembly=Microsoft.Phone"
    xmlns:vm="clr-namespace:PillBox.Client.Framework"
    xmlns:i="clr-namespace:System.Windows.Interactivity;assembly=System.Windows.Interactivity"
    xmlns:ic="clr-namespace:Microsoft.Expression.Interactivity.Core;assembly=Microsoft.Expression.Interactions"
    mc:Ignorable="d" d:DesignHeight="800" d:DesignWidth="480"
	d:DataContext="{d:DesignData ../SampleData/ScheduleViewModelSampleData.xaml}">

    <pn:PhoneApplicationPage.Resources>
        <Storyboard x:Name="ResetPageTransitionList">
        	<DoubleAnimation Duration="0:0:0.3" To="0" Storyboard.TargetProperty="(UIElement.Projection).(PlaneProjection.RotationY)" Storyboard.TargetName="sections" d:IsOptimized="True">
        		<DoubleAnimation.EasingFunction>
        			<CircleEase EasingMode="EaseIn"/>
        		</DoubleAnimation.EasingFunction>
        	</DoubleAnimation>
        	<DoubleAnimation Duration="0:0:0.3" To="0" Storyboard.TargetProperty="(UIElement.Projection).(PlaneProjection.CenterOfRotationX)" Storyboard.TargetName="sections" d:IsOptimized="True">
        		<DoubleAnimation.EasingFunction>
        			<CircleEase EasingMode="EaseIn"/>
        		</DoubleAnimation.EasingFunction>
        	</DoubleAnimation>
        	<DoubleAnimation Duration="0" To="1" Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="grid" d:IsOptimized="True"/>
        	<DoubleAnimation Duration="0" To="1" Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="title" d:IsOptimized="True"/>
        	<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="sections">
        		<EasingDoubleKeyFrame KeyTime="0" Value="1"/>
        		<EasingDoubleKeyFrame KeyTime="0:0:0.3" Value="1"/>
        	</DoubleAnimationUsingKeyFrames>
        </Storyboard>
        <Storyboard x:Name="PageTransitionList">
        	<DoubleAnimationUsingKeyFrames Storyboard.TargetName="sections" Storyboard.TargetProperty="(UIElement.Projection).(PlaneProjection.RotationY)">
        		<EasingDoubleKeyFrame KeyTime="00:00:00" Value="0"/>
        		<EasingDoubleKeyFrame KeyTime="00:00:00.3" Value="90">
        			<EasingDoubleKeyFrame.EasingFunction>
        				<CircleEase EasingMode="EaseIn"/>
        			</EasingDoubleKeyFrame.EasingFunction>
        		</EasingDoubleKeyFrame>
        	</DoubleAnimationUsingKeyFrames>
        	<DoubleAnimationUsingKeyFrames Storyboard.TargetName="sections" Storyboard.TargetProperty="(UIElement.Projection).(PlaneProjection.CenterOfRotationX)">
        		<EasingDoubleKeyFrame KeyTime="00:00:00" Value="0"/>
        		<EasingDoubleKeyFrame KeyTime="00:00:00.3" Value="0">
        			<EasingDoubleKeyFrame.EasingFunction>
        				<CircleEase EasingMode="EaseIn"/>
        			</EasingDoubleKeyFrame.EasingFunction>
        		</EasingDoubleKeyFrame>
        	</DoubleAnimationUsingKeyFrames>
        	<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="sections">
        		<EasingDoubleKeyFrame KeyTime="0" Value="1"/>
        		<EasingDoubleKeyFrame KeyTime="0:0:0.3" Value="0"/>
        	</DoubleAnimationUsingKeyFrames>
        	<DoubleAnimation Duration="0:0:0.3" To="-122" Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.TranslateY)" Storyboard.TargetName="grid" d:IsOptimized="True"/>
        	<DoubleAnimation Duration="0:0:0.3" To="-122" Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.TranslateY)" Storyboard.TargetName="title" d:IsOptimized="True"/>
        	<DoubleAnimation Duration="0:0:0.3" To="0" Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="grid" d:IsOptimized="True"/>
        	<DoubleAnimation Duration="0:0:0.3" To="0" Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="title" d:IsOptimized="True"/>
        </Storyboard>
        
        <Style
            x:Key="Local_PhoneTextPageTitle1Style"
            TargetType="TextBlock"
            BasedOn="{StaticResource PhoneTextPageTitle1Style}">
            <Setter Property="Margin" Value="20,0,0,0"/>
        </Style>

        <Style
            x:Key="Local_PhoneTextPageTitle2Style"
            TargetType="TextBlock"
            BasedOn="{StaticResource PhoneTextPageTitle2Style}">
            <Setter Property="Margin" Value="20,0,0,0"/>
        </Style>
	</pn:PhoneApplicationPage.Resources>

    <pn:PhoneApplicationPage.ApplicationBar>
        <ps:ApplicationBar IsMenuEnabled="False" Opacity=".5">
            <ps:ApplicationBar.Buttons>
                <ps:ApplicationBarIconButton Text="Week" IconUri="Resources/Icons/appbar_week.png" />
                <ps:ApplicationBarIconButton Text="Day" IconUri="Resources/Icons/appbar_day.png" />
                <ps:ApplicationBarIconButton Text="Note" IconUri="Resources/Icons/appbar_note.png" />
            </ps:ApplicationBar.Buttons>
        </ps:ApplicationBar>
    </pn:PhoneApplicationPage.ApplicationBar>
    
    <Canvas
        x:Name="canvas"
        Background="Transparent"
        RenderTransformOrigin="0.5,0.5">
    	<VisualStateManager.VisualStateGroups>
    		<VisualStateGroup x:Name="VisualStateGroup">
    			<VisualStateGroup.Transitions>
    				<VisualTransition GeneratedDuration="0:0:1">
    					<VisualTransition.GeneratedEasingFunction>
    						<CubicEase EasingMode="EaseOut"/>
    					</VisualTransition.GeneratedEasingFunction>
    				</VisualTransition>
    			</VisualStateGroup.Transitions>
    			<VisualState x:Name="SundayState">
    				<Storyboard>
    					<DoubleAnimation Duration="0" To="0" Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.TranslateX)" Storyboard.TargetName="sections" d:IsOptimized="True"/>
    				</Storyboard>
    			</VisualState>
    			<VisualState x:Name="MondayState">
    				<Storyboard>
    					<DoubleAnimation Duration="0" To="-438" Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.TranslateX)" Storyboard.TargetName="sections" d:IsOptimized="True"/>
    				</Storyboard>
    			</VisualState>
    			<VisualState x:Name="TuesdayState">
    				<Storyboard>
    					<DoubleAnimation Duration="0" To="-876" Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.TranslateX)" Storyboard.TargetName="sections" d:IsOptimized="True"/>
    				</Storyboard>
    			</VisualState>
    			<VisualState x:Name="WednesdayState">
    				<Storyboard>
    					<DoubleAnimation Duration="0" To="-1314" Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.TranslateX)" Storyboard.TargetName="sections" d:IsOptimized="True"/>
    				</Storyboard>
    			</VisualState>
    			<VisualState x:Name="ThursdayState">
    				<Storyboard>
    					<DoubleAnimation Duration="0" To="-1752" Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.TranslateX)" Storyboard.TargetName="sections" d:IsOptimized="True"/>
    				</Storyboard>
    			</VisualState>
    			<VisualState x:Name="FridayState">
    				<Storyboard>
    					<DoubleAnimation Duration="0" To="-2190" Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.TranslateX)" Storyboard.TargetName="sections" d:IsOptimized="True"/>
    				</Storyboard>
    			</VisualState>
    			<VisualState x:Name="SaturdayState">
    				<Storyboard>
    					<DoubleAnimation Duration="0" To="-2628" Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.TranslateX)" Storyboard.TargetName="sections" d:IsOptimized="True"/>
    				</Storyboard>
    			</VisualState>
    		</VisualStateGroup>
    	</VisualStateManager.VisualStateGroups>
        <i:Interaction.Triggers>
        	<pi:SwipeGestureTrigger>
        		<pi:SwipeGotoState TargetName="sections"/>
        	</pi:SwipeGestureTrigger>
        </i:Interaction.Triggers>
        <Grid x:Name="grid" Height="23" Width="104" Canvas.Top="22" Canvas.Left="20" RenderTransformOrigin="0.5,0.5">
        	<Grid.RenderTransform>
        		<CompositeTransform/>
        	</Grid.RenderTransform>
    		<TextBlock TextWrapping="Wrap" Style="{StaticResource PhoneTextTitle1Style}" Text="PHONE VAULT" FontSize="16" VerticalAlignment="Bottom" d:LayoutOverrides="Width"/>
    	</Grid>
    	<Grid
    		x:Name="title"
    		HorizontalAlignment="Left" Canvas.Top="20" RenderTransformOrigin="0.5,0.5">
    		<Grid.RenderTransform>
    			<CompositeTransform/>
    		</Grid.RenderTransform>
    		<StackPanel Margin="20,0,10,0" d:LayoutOverrides="Width" Orientation="Horizontal" HorizontalAlignment="Left" VerticalAlignment="Top">
    			<Rectangle x:Name="ColorBand" Width="6" Height="35" Fill="{Binding ColorBand}" VerticalAlignment="Top" d:LayoutOverrides="VerticalAlignment" Margin="0,42,0,0"/>
    			<TextBlock x:Name="textBlockListTitle" Text="{Binding Title}" Style="{StaticResource Phone_PageTitle}" Margin="10,0,0,0" HorizontalAlignment="Left"/>
    		</StackPanel>
    	</Grid>
    	<Grid
    		x:Name="sections"
    		HorizontalAlignment="Left"
    		VerticalAlignment="Bottom"
    		Height="700"
    		Width="3066"
    		RenderTransformOrigin="0.5,0.5" Canvas.Top="25">
    		<Grid.RenderTransform>
    			<CompositeTransform/>
    		</Grid.RenderTransform>
    		<Grid.Projection>
    			<PlaneProjection CenterOfRotationX="0"/>
    		</Grid.Projection>
    		<Grid.ColumnDefinitions>
    			<ColumnDefinition/>
    			<ColumnDefinition/>
    			<ColumnDefinition/>
    			<ColumnDefinition/>
    			<ColumnDefinition/>
    			<ColumnDefinition/>
    			<ColumnDefinition/>
    		</Grid.ColumnDefinitions>
    		<Grid.RowDefinitions>
    			<RowDefinition Height="149"/>
    			<RowDefinition />
    		</Grid.RowDefinitions>
    		<StackPanel
    			x:Name="SundayTitle"
    			VerticalAlignment="Bottom">
    			<i:Interaction.Triggers>
    				<i:EventTrigger EventName="MouseLeftButtonDown">
    					<ic:GoToStateAction StateName="SundayState"/>
    				</i:EventTrigger>
                    <pi:DataTrigger Binding="{Binding Schedules[0].IsToday}" Value="False">
                        <pi:SetProperty PropertyName="Background" Value="#222222"/>
                    </pi:DataTrigger>
                </i:Interaction.Triggers>
    			<StackPanel Orientation="Horizontal" Margin="20,0,0,0">
    				<TextBlock
    					Text="{Binding Schedules[0].Date, ConverterParameter=\{0:ddd\}, Converter={StaticResource Converter_ToLowercase}}"
    					Style="{StaticResource Phone_TitleDay}" VerticalAlignment="Top"/>
    				<TextBlock
    					Text="{Binding Schedules[0].Date, ConverterParameter=\{0:MMM dd\}, Converter={StaticResource Converter_ToUppercase}}"
    					Style="{StaticResource Phone_TextDateLargeGray}" VerticalAlignment="Top" Margin="7,14,0,0"/>
    			</StackPanel>
    		</StackPanel>
    		<StackPanel
    			x:Name="MondayTitle"
    			VerticalAlignment="Bottom"
    			Grid.Column="1">
    			<i:Interaction.Triggers>
    				<i:EventTrigger EventName="MouseLeftButtonDown">
    					<ic:GoToStateAction StateName="MondayState"/>
    				</i:EventTrigger>
                    <pi:DataTrigger Binding="{Binding Schedules[1].IsToday}" Value="False">
                        <pi:SetProperty PropertyName="Background" Value="#222222"/>
                    </pi:DataTrigger>
    			</i:Interaction.Triggers>
    			<StackPanel Orientation="Horizontal" Margin="20,0,0,0">
    				<TextBlock
    					Text="{Binding Schedules[1].Date, ConverterParameter=\{0:ddd\}, Converter={StaticResource Converter_ToLowercase}}"
    					Style="{StaticResource Phone_TitleDay}" VerticalAlignment="Top"/>
    				<TextBlock
    					Text="{Binding Schedules[1].Date, ConverterParameter=\{0:MMM dd\}, Converter={StaticResource Converter_ToUppercase}}"
    					Style="{StaticResource Phone_TextDateLargeGray}" VerticalAlignment="Top" Margin="7,14,0,0"/>
    			</StackPanel>
    		</StackPanel>
    		<StackPanel
    			x:Name="TuesdayTitle"
    			VerticalAlignment="Bottom"
    			Grid.Column="2">
    			<i:Interaction.Triggers>
    				<i:EventTrigger EventName="MouseLeftButtonDown">
    					<ic:GoToStateAction StateName="TuesdayState"/>
    				</i:EventTrigger>
                    <pi:DataTrigger Binding="{Binding Schedules[2].IsToday}" Value="False">
                        <pi:SetProperty PropertyName="Background" Value="#222222"/>
                    </pi:DataTrigger>
    			</i:Interaction.Triggers>
    			<StackPanel Orientation="Horizontal" Margin="20,0,0,0">
    				<TextBlock
    					Text="{Binding Schedules[2].Date, ConverterParameter=\{0:ddd\}, Converter={StaticResource Converter_ToLowercase}}"
    					Style="{StaticResource Phone_TitleDay}" VerticalAlignment="Top"/>
    				<TextBlock
    					Text="{Binding Schedules[2].Date, ConverterParameter=\{0:MMM dd\}, Converter={StaticResource Converter_ToUppercase}}"
    					Style="{StaticResource Phone_TextDateLargeGray}" VerticalAlignment="Top" Margin="7,14,0,0"/>
    			</StackPanel>
    		</StackPanel>
    		<StackPanel
    			x:Name="WednesdayTitle"
    			VerticalAlignment="Bottom"
    			Grid.Column="3">
    			<i:Interaction.Triggers>
    				<i:EventTrigger EventName="MouseLeftButtonDown">
    					<ic:GoToStateAction StateName="WednesdayState"/>
    				</i:EventTrigger>
                    <pi:DataTrigger Binding="{Binding Schedules[3].IsToday}" Value="False">
                        <pi:SetProperty PropertyName="Background" Value="#222222"/>
                    </pi:DataTrigger>
    			</i:Interaction.Triggers>
    			<StackPanel Orientation="Horizontal" Margin="20,0,0,0">
    				<TextBlock
    					Text="{Binding Schedules[3].Date, ConverterParameter=\{0:ddd\}, Converter={StaticResource Converter_ToLowercase}}"
    					Style="{StaticResource Phone_TitleDay}" VerticalAlignment="Top"/>
    				<TextBlock
    					Text="{Binding Schedules[3].Date, ConverterParameter=\{0:MMM dd\}, Converter={StaticResource Converter_ToUppercase}}"
    					Style="{StaticResource Phone_TextDateLargeGray}" VerticalAlignment="Top" Margin="7,14,0,0"/>
    			</StackPanel>
    		</StackPanel>
    		<StackPanel
    			x:Name="ThursdayTitle"
    			VerticalAlignment="Bottom"
    			Grid.Column="4">
    			<i:Interaction.Triggers>
    				<i:EventTrigger EventName="MouseLeftButtonDown">
    					<ic:GoToStateAction StateName="ThursdayState"/>
    				</i:EventTrigger>
                    <pi:DataTrigger Binding="{Binding Schedules[4].IsToday}" Value="False">
                        <pi:SetProperty PropertyName="Background" Value="#222222"/>
                    </pi:DataTrigger>
    			</i:Interaction.Triggers>
    			<StackPanel Orientation="Horizontal" Margin="20,0,0,0">
    				<TextBlock
    					Text="{Binding Schedules[4].Date, ConverterParameter=\{0:ddd\}, Converter={StaticResource Converter_ToLowercase}}"
    					Style="{StaticResource Phone_TitleDay}" VerticalAlignment="Top"/>
    				<TextBlock
    					Text="{Binding Schedules[4].Date, ConverterParameter=\{0:MMM dd\}, Converter={StaticResource Converter_ToUppercase}}"
    					Style="{StaticResource Phone_TextDateLargeGray}" VerticalAlignment="Top" Margin="7,14,0,0"/>
    			</StackPanel>
    		</StackPanel>
    		<StackPanel
    			x:Name="FridayTitle"
    			VerticalAlignment="Bottom"
    			Grid.Column="5">
    			<i:Interaction.Triggers>
    				<i:EventTrigger EventName="MouseLeftButtonDown">
    					<ic:GoToStateAction StateName="FridayState"/>
    				</i:EventTrigger>
                    <pi:DataTrigger Binding="{Binding Schedules[5].IsToday}" Value="False">
                        <pi:SetProperty PropertyName="Background" Value="#222222"/>
                    </pi:DataTrigger>
    			</i:Interaction.Triggers>
    			<StackPanel Orientation="Horizontal" Margin="20,0,0,0">
    				<TextBlock
    					Text="{Binding Schedules[5].Date, ConverterParameter=\{0:ddd\}, Converter={StaticResource Converter_ToLowercase}}"
    					Style="{StaticResource Phone_TitleDay}" VerticalAlignment="Top"/>
    				<TextBlock
    					Text="{Binding Schedules[5].Date, ConverterParameter=\{0:MMM dd\}, Converter={StaticResource Converter_ToUppercase}}"
    					Style="{StaticResource Phone_TextDateLargeGray}" VerticalAlignment="Top" Margin="7,14,0,0"/>
    			</StackPanel>
    		</StackPanel>
    		<StackPanel
    			x:Name="SaturdayTitle"
    			VerticalAlignment="Bottom"
    			Grid.Column="6">
    			<i:Interaction.Triggers>
    				<i:EventTrigger EventName="MouseLeftButtonDown">
    					<ic:GoToStateAction StateName="SaturdayState"/>
    				</i:EventTrigger>
                    <pi:DataTrigger Binding="{Binding Schedules[6].IsToday}" Value="False">
                        <pi:SetProperty PropertyName="Background" Value="#222222"/>
                    </pi:DataTrigger>
    			</i:Interaction.Triggers>
    			<StackPanel Orientation="Horizontal" Margin="20,0,0,0">
    				<TextBlock
    					Text="{Binding Schedules[6].Date, ConverterParameter=\{0:ddd\}, Converter={StaticResource Converter_ToLowercase}}"
    					Style="{StaticResource Phone_TitleDay}" VerticalAlignment="Top"/>
    				<TextBlock
    					Text="{Binding Schedules[6].Date, ConverterParameter=\{0:MMM dd\}, Converter={StaticResource Converter_ToUppercase}}"
    					Style="{StaticResource Phone_TextDateLargeGray}" VerticalAlignment="Top" Margin="7,14,0,0"/>
    			</StackPanel>
    		</StackPanel>
    		<ContentControl
    			x:Name="Sunday"
    			vm:View.Model="{Binding Schedules[0]}"
    			HorizontalContentAlignment="Stretch"
    			VerticalContentAlignment="Stretch"
    			Grid.Row="1"/>
			<ContentControl
    			x:Name="Monday"
    			vm:View.Model="{Binding Schedules[1]}"
    			HorizontalContentAlignment="Stretch"
    			VerticalContentAlignment="Stretch"
				Grid.Row="1"
				Grid.Column="1"/>
    		<ContentControl
    			x:Name="Tuesday"
    			vm:View.Model="{Binding Schedules[2]}"
    			HorizontalContentAlignment="Stretch"
    			VerticalContentAlignment="Stretch"
    			Grid.Row="1"
    			Grid.Column="2"/>
    		<ContentControl
    			x:Name="Wednesday"
    			vm:View.Model="{Binding Schedules[3]}"
    			HorizontalContentAlignment="Stretch"
    			VerticalContentAlignment="Stretch"
    			Grid.Row="1"
    			Grid.Column="3"/>
    		<ContentControl
    			x:Name="Thursday"
    			vm:View.Model="{Binding Schedules[4]}"
    			HorizontalContentAlignment="Stretch"
    			VerticalContentAlignment="Stretch"
    			Grid.Row="1"
    			Grid.Column="4"/>
    		<ContentControl
    			x:Name="Friday"
    			vm:View.Model="{Binding Schedules[5]}"
    			HorizontalContentAlignment="Stretch"
    			VerticalContentAlignment="Stretch"
    			Grid.Row="1"
    			Grid.Column="5"/>
    		<ContentControl
    			x:Name="Saturday"
    			vm:View.Model="{Binding Schedules[6]}"
    			HorizontalContentAlignment="Stretch"
    			VerticalContentAlignment="Stretch"
    			Grid.Row="1"
    			Grid.Column="6"/>
    	</Grid>
	</Canvas>
</pn:PhoneApplicationPage>